﻿<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Hello MUI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/app.css"/>

    <script src="../../assets/libs/Jquery-knob/js/jquery.min.js"></script>
    <script src="../../assets/libs/Jquery-knob/js/jquery.knob.js"></script>
    <script>
            $(function() {
                $(".knob").knob();

                // Example of infinite knob, iPod click wheel
                var val,up=0,down=0,i=0
                    ,$idir = $("div.idir")
                    ,$ival = $("div.ival")
                    ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
                    ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
                $("input.infinite").knob(
                                    {
                                    'min':0
                                    ,'max':20
                                    ,'stopper':false
                                    ,'change':function(v){
                                                if(val>v){
                                                    if(up){
                                                        decr();
                                                        up=0;
                                                    }else{up=1;down=0;}
                                                }else{
                                                    if(down){
                                                        incr();
                                                        down=0;
                                                    }else{down=1;up=0;}
                                                }
                                                val=v;
                                            }
                                    }
                                    );


                // Automatic mode
                /*var autoVal = 0
                    ,timer = setInterval(function() {
                        $(".knob").each(
                                function(){
                                    $(this)
                                        .val(Math.round(Math.sin(autoVal)*100))
                                        .trigger('change');
                                }
                            );
                        autoVal++;
                    }, 100);*/

                 // Configure
                 /*$(".knob").val(25).trigger(
                            "configure",
                            {"min":10, "max":40, "fgColor":"#FF0000", "skin":"tron", "cursor":true}
                            );*/

                 // Change example
                 /*$(".knob").knob(
                                {
                                'change':function(e){
                                        console.log(e);
                                    }
                                }
                            )
                           .val(79)
                           ;*/
            });
    </script>
    <style>
        h2 {
            color: #87CEEB;
            font-family: 'Georgia';
        }
    </style>
	<style>
		.title{
			margin: 20px 15px 7px;
			color: #6d6d72;
			font-size: 15px;
		}
		.mui-plus header.mui-bar{
			display: block;
		}
		.mui-plus .mui-bar-nav~.mui-content{
			padding-top:36px;
		}
		
		/*头部菜单*/
		.mui-popover {
			height: 80px;
			width:150px;
			font-size: 14px;
			color: #aaa;
		}
		.mui-popover .mui-table-view-cell{
			padding:8px 15px;
		}
		.mui-popover li.mui-table-view-cell:after{
			left: 0;
			background: blank!important;
		}
        .divcss5-right{width:30px; height:30px;border:0px solid #F00;float:right;display:inline-block;} 
	</style>
</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="width: auto;">
			<h1 class="mui-title">承接查验</h1>
			<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
			<!--<span class="mui-icon mui-icon-bars mui-pull-right mui-active"></span>-->
		</header>
		<div class="mui-content" id="list">
			<div class="title">
				富力新城-二期：第一批次验房
			</div>
			<ul class="mui-table-view">
				 <li class="mui-table-view-cell">
				 	18栋-11
				 	<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined btndown">
						下载
					</button>
                 <div class="divcss5-right downclass" style="display:none;">
                     <input class="knob" data-width="30" data-fgColor="#A9EFFD" data-min="-100" data-angleOffset="90" data-displayPrevious=true value="44">
                 </div>
				 </li>
				 <li class="mui-table-view-cell">
				 	<a class="mui-navigate-right" href="unit_housing.html">
				 		18栋-2
				 	</a>	
				 </li>
				 <li class="mui-table-view-cell">
				 	<a class="mui-navigate-right" href="machine.html">
				 		设备设施
				 	</a>	
				 </li>
                <li class="mui-table-view-cell">                   
                        18栋-3                    
                    <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined btnupload" style="display:inline-block;">
                        上传
                    </button>
                    <div class="divcss5-right uploadclass" style="display:none;">
                        <input class="knob" data-width="30" data-fgColor="#ffec03" data-min="-100" data-angleOffset="90" data-displayPrevious=true value="44">
                    </div>
                </li>
			</ul>
		</div>

		<!--右上角弹出菜单-->
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#">全部下载</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#">全部上传</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="js/home.js"></script>
	</body>
</html>
